<template>
    <view>
        <view v-for="group in allGroup" :key="group.groupId" class="group-container">
            <view class="group-header">
                <text class="group-title">{{ group.groupName }}</text>
            </view>
            <view class="group-info">
                <view class="group-item">
                    <text class="label">状态：</text>
                    <text class="value">{{ group.groupStatus == 1 ? '已有任务' : '暂无任务' }}</text>
                </view>
                <view class="group-item">
                    <text class="label">组长：</text>
                    <text class="value">{{ group.groupLeader }}</text>
                </view>
                <view class="group-item">
                    <text class="label">组员：</text>
                    <text class="value">{{ group.members.map(member => (member.memberName)).join('、') }}</text>
                </view>
                <view class="group-item">
                    <text class="label">备注：</text>
                    <text class="value">{{ group.groupNote }}</text>
                </view>
            </view>
        </view>
        <tabBar></tabBar>
    </view>
</template>

<script>
    import {
        groupApi
    } from '@/api';
    import { User } from '../../utils';
    export default {
        name: "groupLeader",
        data() {
            return {
                allGroup: [{
                    groupId: "grp001",
                    groupName: "甲组",
                    groupStatus: 1,
                    groupLeaderId: "usr101",
                    groupLeader: "张三",
                    groupNote: "主要研究团队",
                    members: [{
                        memberId: "user102",
                        memberName: "李四",
                    },{
                        memberId: "usr103",
                        memberName: "王五",
                    },{
                        memberId: "usr104",
                        memberName: "赵六",
                    }]
                }]
            };
        },
        methods: {
            async fetchGroups() {
                try {
                    uni.showLoading({
                        title: "请稍后"
                    })
                    const {
                        code,
                        data
                    } = await groupApi.getGroupByMember({
                        "userId":  User.get().userId,
                    });
                    if (code == 200) {
                        this.allGroup = data;
                    }
                } finally {
                    uni.hideLoading();
                }
            },
        },
        mounted() {
            this.fetchGroups();
        },
        onPullDownRefresh() {
            this.fetchGroups();
            uni.stopPullDownRefresh();
        }
    };
</script>

<style scoped>
    .group-container {
        margin: 10px;
        padding: 15px;
        background-color: #f7f7f7;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }

    .group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .group-title {
        font-weight: bold;
        font-size: 18px;
    }

    .group-actions u-button {
        margin-left: 10px;
    }

    .group-info {
        margin-top: 10px;
    }

    .group-item {
        display: flex;
        margin-bottom: 5px;
    }

    .label {
        font-weight: bold;
        width: 60px;
    }

    .value {
        flex: 1;
    }
</style>